<template>
  <div class="channel">
    <div class="option-box serach-bar">
      <el-form ref="searchForm" label-width="140px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="请输入App名称">
              <el-input v-model="appName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            ></el-col
          ></el-row
        ></el-form
      >
    </div>
    <div class="option-box">
      <div class="table-options">
        <el-button
          type="primary"
          size="small"
          plain
          @click="addDialog"
          v-permission="{ action: 'add' }"
          >新增</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="App名称" prop="name"></el-table-column>
        <el-table-column
          width="120"
          label="APP_ID"
          prop="appID"
        ></el-table-column>
        <el-table-column label="包名" prop="className"></el-table-column>
        <el-table-column width="120" label="类型" prop="type"></el-table-column>
        <el-table-column
          width="120"
          label="积分汇率"
          prop="huilv"
        ></el-table-column>
        <el-table-column
          width="120"
          label="当前版本"
          prop="banben"
        ></el-table-column>
        <el-table-column
          width="120"
          label="升级编码"
          prop="code"
        ></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.row)"
              v-permission="{ action: 'edit', effect: 'disabled' }"
              >编辑</el-button
            >
            <el-button
              size="small"
              @click="handleCopy(scope.row)"
              v-permission="{ action: 'copy', effect: 'disabled' }"
              >拷贝</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              v-permission="{ action: 'delete' , effect: 'disabled'}"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :size="size"
        :total="total"
        :page="page"
      ></pagination>
    </div>
    <dataDialog ref="dialog" :title="title"></dataDialog>
  </div>
</template>

<script lang="ts">
import dataDialog from "./dataDialog.vue";
import pagination from "@/components/pagination.vue";
import { Component, Vue } from "vue-property-decorator";
import { getChannelList } from "@/api/api";
@Component({
  components: { pagination, dataDialog },
})
export default class ChannelManage extends Vue {
  tableData: any[] = [];
  loading: boolean = false;
  appName: string = "";
  page: number = 1;
  size: number = 5;
  total: number = 20;

  title: string = "";

  handleSearch(): void {
    this.page = 1;
    this.getDataList();
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.getDataList();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.getDataList();
  }
  handleCopy(): void {
    this.title = "拷贝配置";
    (this.$refs.dialog as any).dialogVisible = true;
  }
  handleEdit() {
    this.title = "配置修改";
    (this.$refs.dialog as any).dialogVisible = true;
  }
  addDialog(): void {
    this.title = "新增配置";
    (this.$refs.dialog as any).dialogVisible = true;
  }
  handleDelete(item: any) {
    this.$confirm(
      `是否删除名称为${item.name},id为${item.appID}的此条数据?`,
      "",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        console.log(item);
        // this.tableData = this.tableData.filter((data) => item != data);
        console.log(this.tableData);
        this.$message.success("删除成功!");
      })
      .catch(() => {});
  }

  async getDataList() {
    this.loading = true;
    const { data } = await getChannelList();
    this.loading = false;
    this.tableData = data;
  }
  init() {
    this.getDataList();
  }
  created() {
    this.init();
  }
}
</script>

<style scoped>
</style>